<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            width: 400px;
            height: 60px;
            background-color: pink;
            line-height: 60px;
            margin-top: 10px;
            position: relative;
        }
        li button{
            margin-left: 40px;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <input type="text" id="add">
    <ul id="box">

    </ul>
</body>
</html>
<script type="module">
    import cookie from "./js.cookie.min.mjs"
    class Word{
        constructor(options){
            //获取元素
            this.add=document.querySelector(options.add)
            // console.log(add)
            this.box=document.querySelector(options.box)
            //创建一个列表向本地储存数据!!!!!!获取本地里面的数据的时候要转成数组！！！！！！！JSON.parse   JSON.parse   JSON.parse  JSON.parse   JSON.parse  JSON.parse  JSON.parse  JSON.parse
            //获取本地存储里的数据
            // this.list=JSON.parse(localStorage.getItem('list'))||[]
            //获取cookie里的数据

            this.list=[]
            // console.log(this.list)
            //调用方法
            this.addInp()
            this.del()
            this.show()
            this.getCookie()
        }
        
        //添加
        addInp(){
            //监听输入框
            this.add.addEventListener('keydown',(e)=>{
                // console.log(e);
                if(e.code=='Enter'){
                    if(this.add.value==''){
                        return alert('内容不能为空')
                    }
                    let obj={title:this.add.value}
                    this.list.push(obj)
                    this.setCity()
                    this.add.value=''
                    this.show()
                }
            })
        }
        //本地储存
        setCity(){
            // 数组转JSON字符串存到本地
            // localStorage.setItem('list',JSON.stringify(this.list))
            //数组转JSON字符串存到cookie
            cookie.set(JSON.stringify(this.list))
        }
        //获取cookie的方法
        getCookie(){
            // console.log(cookie.get('list')==undefined);
            if(cookie.get('list')==undefined){
                // console.log(111);
                this.list=[]
            }else{
                // console.log(22);
                this.list=JSON.parse(cookie.get('list'))
            }
        }
        //渲染
        show(){
            let ingValue=''
            //遍历本地||cookie里的数组，向li标签里添加内容
            this.list.forEach((item,index)=>{
                ingValue +=`
                    <li>
                    <p>${item.title}</p>
                    <button data-key="${index}">删除</button>    
                    </li>
                `
            })
            this.box.innerHTML=ingValue
        }
        //删除
        del(){
            // 监听box大盒子
            this.box.addEventListener('click',(e)=>{
                console.log(e);
                if(e.target.nodeName=='BUTTON'){
                    if(confirm('确定要删除吗')){
                        this.list.splice(e.target.dataset.key,1)
                        this.setCity()
                        cookie.re
                        this.show()
                    }
                }
            })
        }
    }
    new Word({
        add:'#add',
        box:'#box'
    })
</script>